<template>
	<view class="content" style="height: 100%;" @mousedown="onMouseDown1" @touchmove="touchmove1">
		<!-- <image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<textarea style="border: 1px solid red;" name="" maxlength="-1" id="" cols="30" rows="10"></textarea> -->
		<scroll-view scroll-y="true" style="height: 100%;">
			<view v-for="(item,index) in projectList" :key="index">
				{{item.name}}
				<image :src="item.background" mode="aspectFit" style="width:100rpx;height:100rpx"></image>
			</view>
			<view v-for="(item,index) in projectList" :key="index">
				{{item.name}}
				<image :src="item.background" mode="aspectFit" style="width:100rpx;height:100rpx"></image>
			</view>
		</scroll-view>

		<view class="mask" v-if="show">
			<view class="fixed" @mousedown.stop="onMouseDown2" @touchmove.stop="touchmove2">

			</view>
		</view>
		<view style="position: fixed;top:100px;left: 10px;padding:20px" @click="toggle">
			toggle
		</view>

	</view>
</template>

<script>
	import {
		getProjectListApi
	} from "@/api/project.js";
	export default {
		data() {
			return {
				title: 'Hello',
				projectList: [],
				show: true
			}
		},
		onLoad() {
			this.getProjectList()
		},
		methods: {
			getProjectList() {
				getProjectListApi().then(res => {
					this.projectList = res.data.result.list
					console.log(res)
				})
			},
			onMouseDown2(e) {
				e.stopPropagation()
				console.log(2);
			},
			onMouseDown1() {
				console.log(1);
			},
			touchmove1(e) {
				console.log(1);
				e.stopPropagation()
			},
			touchmove2(e) {
				console.log(2);
				e.stopPropagation()
			},
			toggle() {
				this.show = !this.show
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.fixed {
		width: 100%;
		height: 500rpx;
		background-color: deeppink;
		box-shadow: 0 0 5px 0;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 6;
	}

	.mask {
		
	}
	
</style>